<template>
	<view>
		<view v-for="[key, field] in Object.entries(options)" :key="key" class="w100 borderbottom">
			<template v-if="field.type === 'input'">
				<titleItem :label="field.title" :title="model[key]"></titleItem>
			</template>
			<template v-if="field.type === 'upload'">
				<view class="w100 rowSpaceBetween alignStart pv20">
					<view class="cardUnit w100">
						{{ field.title }}
					</view>
					<uploadView :tips="field.placeholder" :maxCount="readonly ? 0 : field.maxCount" :customUrl="field.customUrl" :readonly="readonly" v-model="model[key]" />
				</view>
			</template>
			<template v-if="field.type === 'radio'">
				<titleItem :label="field.title" :title="getRadioValue(field.option, model[key])"></titleItem>
			</template>
			<template v-if="field.type === 'checkbox'">
				<titleItem :label="field.title" :title="getCheckboxValue(field.option, model[key])"></titleItem>
			</template>
			<view v-if="field.rateInfo || key == 'rateInfo'" class="cardContiner w100 mtb20" style="background-color: #f4f4f4">
				<payRateVue ref="payRate" :disabled="readonly" :options="field.rateInfo ?? field" :payRateInfo="model.rateInfo || {}"></payRateVue>
			</view>
		</view>
	</view>
</template>

<script>
import uploadView from '@/components/form/uploadView/uploadView.vue';
import titleItem from '@/components/titleItem/titleItem.vue';
import payRateVue from '../FormComponent/payRate.vue';

export default {
	components: {
		uploadView,
		titleItem,
		payRateVue
	},
	props: {
		options: {
			type: Object,
			required: true
		},
		readonly: {
			type: Boolean,
			default: false
		},
		formInfo: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			model: {},
			rules: {}, // 基本案列数据
			timeRadioItems: [
				{
					name: '选择时间',
					value: '0',
					checked: false
				},
				{
					name: '长期有效',
					value: '1',
					checked: false
				}
			]
			// rules: this.generateRules(), // 基本案列数据
		};
	},
	computed: {
		// 动态生成表单验证规则
		fields() {
			return this.options;
		}
	},
	mounted() {
		if (!this.formInfo) {
			this.initForm();
		} else {
			this.model = this.formInfo;
		}
		uni.$on('selectIndustry', (e) => {
			this.model['companyCategory'] = e;
		});
		uni.$on('bankBranch', (e) => {
			this.model['bankBranch'] = e;
		});
		// this.rules = this.generateRules();
	},
	methods: {
		//计算根据model值获取radio的选中汉字值
		getRadioValue(options, key) {
			if (!key) return ' ';
			return options.find((item) => item.value === key)?.label || '1';
		},
		//计算根据model值获取checkbox的选中汉字值
		getCheckboxValue(options, key) {
			if (!key) return ' ';
			let result = options
				.filter((item) => key.includes(item.value))
				.map((item) => item.label)
				.join(' , ');
			return result || '1';
		},

		initForm() {
			// 设置初始值
			Object.entries(this.options).forEach(([key, field]) => {
				if (field.type === 'radio') {
					this.model[key] = '0';
				}
				if (field.type === 'timeRadio') {
					this.model[key] = '0';
				} else if (field.type === 'checkbox') {
					this.model[key] = []; // 多选初始化为空数组
				} else {
					this.model[key] = field.value || ''; // 其他类型初始化为空字符串
				}
			});
		},
		getModel() {
			let model = this.model;
			if (this.$refs.payRate) {
				this.model['rateInfo'] = this.$refs.payRate[0].model; // 多选初始化为空数组
			}
			return toRaw(model);
		},
		validate() {
			this.$refs.form
				.validate()
				.then((res) => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					});
					return true;
				})
				.catch((errors) => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					});
					return false;
				});
		},
		// 生成验证规则
		generateRules() {
			return Object.fromEntries(
				Object.entries(this.fields)
					.map(([key, field]) => {
						return field.validate
							? [
									`userInfo.${key}`,
									{
										required: field.validate.required,
										message: `${field.title} 是必填项`,
										trigger: ['blur', 'change']
									}
							  ]
							: null;
					})
					.filter(Boolean)
			);
		},
		//弹窗确定事件反馈
		poupCheckConfirm() {
			console.log('复选框选中值');
		},
		//时间单选切换
		timeChageRadio() {
			console.log('切换');
		},
		//打开地区选择器
		selectArea() {
			this.$refs.areaVue[0].open();
		},
		//打开滚动选择器
		openScollPick() {
			this.$refs.scollPickVue[0].openPicker();
		}
	}
};
</script>

<style scoped lang="scss">
.mar10 {
	margin: 10rpx;
}

::v-deep .uv-form-item__body__left__content__label {
	font-size: 26rpx;
}

.subTitle {
	font-size: 24rpx;
	color: var(--themeDefultFontColor);
	margin: 10rpx 0;
}
</style>
